<template>
  <div class="page-share-about">
    <header-nav></header-nav>
    <div class="container-body">
      <div class="box-body">
        <img class="bg" src="@/assets/images/bg_about.png" />
        <div class="container-logo">
          <div class="wrap-logo" :style="wrapStyle">
            <img class="icon-logo" src="@/assets/images/logo.png" />
          </div>
        </div>
        <div class="container-introduce">
          <div class="item-introduce">
            <div class="wrap-icon-introduce">
              <img
                class="icon-introduce openai"
                src="@/assets/images/icon_about_openai.png"
              />
            </div>
            <div class="wrap-introduce">
              <div class="title-introduce">
                <img
                  class="img-title-introduce title-introduce-openai"
                  src="@/assets/images/title_about_openai.png"
                />
              </div>
              <div class="description-introduce">
                {{ agentInfo.agent_remark_005 }}
              </div>
            </div>
          </div>
          <div class="item-introduce">
            <div class="wrap-icon-introduce">
              <img
                class="icon-introduce"
                src="@/assets/images/icon_about_history.png"
              />
            </div>
            <div class="wrap-introduce">
              <div class="title-introduce">
                <img
                  class="img-title-introduce title-introduce-history"
                  src="@/assets/images/title_about_history.png"
                />
              </div>
              <div class="description-introduce">
                {{ agentInfo.agent_remark_006 }}
              </div>
            </div>
          </div>
          <div class="item-introduce">
            <div class="wrap-icon-introduce">
              <img
                class="icon-introduce"
                src="@/assets/images/icon_about_edit.png"
              />
            </div>
            <div class="wrap-introduce">
              <div class="title-introduce">
                <img
                  class="img-title-introduce title-introduce-edit"
                  src="@/assets/images/title_about_edit.png"
                />
              </div>
              <div class="description-introduce">
                {{ agentInfo.agent_remark_007 }}
              </div>
            </div>
          </div>
          <div class="item-introduce recommend">
            <div class="wrap-icon-introduce">
              <img
                class="icon-introduce"
                src="@/assets/images/icon_about_recommend.png"
              />
            </div>
            <div class="wrap-introduce">
              <div class="title-introduce">
                <img
                  class="img-title-introduce title-introduce-recommend"
                  src="@/assets/images/title_about_recommend.png"
                />
              </div>
              <div class="description-introduce">
                {{ agentInfo.agent_remark_008 }}
              </div>
            </div>
          </div>
        </div>

        <div class="container-question">
          <div class="title-question">常见问题</div>

          <div v-for="(item, idx) in questionList" class="item-question">
            <div class="cont-title-arrow" @click="handleExpand(idx)">
              <div class="cont-title">{{ item.question }}</div>
              <div class="cont-arrow">
                <img
                  :class="['img-arrow', item.expand ? 'up' : 'down']"
                  src="@/assets/images/icon_arrow_left.png"
                />
              </div>
            </div>
            <div v-if="item.expand" class="cont-description">
              {{ item.answer }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-download" @click="onDownLoad">打开英语一点通APP</div>
  </div>
</template>
<script>
import Base64 from "@/utils/base64";
import { download } from "@/utils/openApp.js";
import HeaderNav from "@/components/header-nav/index";
export default {
  name: "shareabout",
  components: {
    HeaderNav,
  },
  data() {
    return {
      agentInfo: {
        agent_remark_005: "最先进的人工智能模型，为用户提供高质量的回复",
        agent_remark_006:
          "能够理解和解释用户的意图和语言，并根据上下文进行智能回应，并记录用户的对话历史",
        agent_remark_007:
          "多轮对话；整个对话过程中，可以随时编辑对话内容，让用户获得更精准的答案",
        agent_remark_008: "推荐回复展示，为用户提供更多创意灵感",
      },
      questionList: [
        // {
        //   question: "怎么收费？",
        //   answer:
        //     "怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？",
        //   expand: false,
        // },
        // {
        //   question: "怎么收费？",
        //   answer:
        //     "怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？",
        //   expand: false,
        // },
        // {
        //   question: "怎么收费？",
        //   answer:
        //     "怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？怎么收费？",
        //   expand: false,
        // },
      ],
    };
  },
  mounted() {
    this.getShopInfo();
  },
  methods: {
    handleExpand(idx) {
      let expand = !this.questionList[idx].expand;
      this.questionList[idx].expand = expand;
    },
    // 获取门店信息
    getShopInfo() {
      this.$http
        .post({
          name: "login",
          data: {
            invoke_method: "login_by_password",
            user_phone: "x-teamer",
            password_user: "123456",
            pre_cmd_para_need_pic_code: false,
            pre_cmd_para_show_user_tree: true,
          },
          loading: {
            enabled: true,
          },
        })
        .then(({ result, response }) => {
          Object.assign(this.agentInfo, result.public_agent_info);
          console.log(this.agentInfo, ">>>>>");
          let qaList = [];
          if (this.agentInfo && this.agentInfo.agent_remark_010) {
            console.log(this.agentInfo.agent_remark_010, ">>>>");
            try {
              let content = Base64.decode(this.agentInfo.agent_remark_010);
              qaList = JSON.parse(content)?.qa_list || [];
              qaList.forEach((item) => {
                item.expand = false;
              });
            } catch (error) {
              console.log(error, ">>");
            }

            // console.log(content, ">>>>>");
          }
          this.questionList = qaList;
          this.showContent();
          return;
        })
        .catch(({ msg }) => {
          this.showMessage(msg);
        });
    },
    onDownLoad() {
      let url = download();
      if (!url) {
        this.$$message({
          content: "请用默认浏览器打开该链接",
          sure(node, close) {
            resolve({
              node,
              close,
            });
          },
        });
      } else {
        window.location.href = url;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.page-share-about {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 1.813rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  background: #182836;
  box-sizing: border-box;
  overflow: hidden;

  .container-body {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;

    .box-body {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;

      .bg {
        position: absolute;
        width: 100%;
        height: 12.213rem;
        vertical-align: top;
        top: 0;
        left: 0;
      }

      .container-logo {
        position: relative;
        width: 100%;
        padding-top: 2.133rem;
        box-sizing: border-box;

        .wrap-logo {
          position: relative;
          width: 4.213rem;
          height: 4.213rem;
          // background: #182836;
          border: 0.106rem solid #3ea373;
          border-radius: 1.066rem;
          box-sizing: border-box;
          margin: 0 auto;

          box-shadow: 0px 0.053rem 1.44rem 0px rgba(69, 101, 128, 0.7);
          overflow: hidden;

          .icon-logo {
            position: relative;
            width: 100%;
            height: 100%;
          }
        }
      }

      .container-introduce {
        position: relative;
        width: 18.293rem;
        padding: 1.28rem 0.853rem;
        // background: rgba(72, 194, 130, 0.8);
        background: rgba(0, 255, 246, 1);
        border: 1px solid rgba(255, 255, 255, 0.98);
        border-radius: 1.28rem;
        box-sizing: border-box;
        margin: 2.133rem auto 0;
        overflow: hidden;

        .item-introduce {
          position: relative;
          width: 100%;
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          margin-bottom: 1.2rem;

          &:last-child {
            margin-bottom: 0;
          }

          .wrap-icon-introduce {
            position: relative;
            width: 2.133rem;
            height: 2.133rem;
            background-color: rgba(24, 40, 54, 1);
            border-radius: 50%;
            margin-right: 0.666rem;
            flex-shrink: 0;

            .icon-introduce {
              position: absolute;
              width: 1.226rem;
              height: 1.226rem;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              vertical-align: top;

              &.openai {
                width: 2.133rem;
                height: 2.133rem;
              }
            }
          }

          .wrap-introduce {
            position: relative;
            flex: 1;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;

            .title-introduce {
              position: relative;
              width: 100%;

              img {
                display: block;
              }

              .title-introduce-openai {
                width: 12.826rem;
                height: 0.96rem;
                vertical-align: top;
              }

              .title-introduce-history {
                width: 4.906rem;
                height: 0.8rem;
                vertical-align: top;
              }

              .title-introduce-edit {
                width: 7.84rem;
                height: 0.826rem;
                vertical-align: top;
              }

              .title-introduce-recommend {
                width: 6.026rem;
                height: 0.853rem;
                vertical-align: top;
              }
            }

            .description-introduce {
              position: relative;
              width: 100%;
              word-break: break-all;
              font-size: 0.64rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(24, 40, 54, 1);
              line-height: 0.96rem;
              opacity: 0.7;
              margin-top: 0.373rem;
            }
          }
        }
      }

      .container-question {
        position: relative;
        width: 100%;
        margin-top: 1.706rem;
        padding-bottom: 1.76rem;
        box-sizing: border-box;

        .title-question {
          position: relative;
          width: 100%;
          text-align: center;
          font-size: 0.96rem;
          // font-family: PingFang SC;
          font-weight: 600;
          color: #fefefe;
          line-height: 0.96rem;
          margin-bottom: 1.066rem;
        }

        .item-question {
          position: relative;
          width: 18.293rem;
          padding: 1.066rem 0.853rem;
          background: #213343;
          border-radius: 0.746rem;
          margin: 0 auto 0.666rem;
          box-sizing: border-box;

          .cont-title-arrow {
            position: relative;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            align-items: center;

            .cont-title {
              position: relative;
              flex: 1;
              font-size: 0.853rem;
              // font-family: PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 1.28rem;
            }

            .cont-arrow {
              position: relative;
              width: 0.746rem;
              height: 0.426rem;
              margin-left: 0.266rem;

              .img-arrow {
                position: relative;
                width: 0.426rem;
                height: 0.746rem;
                vertical-align: top;

                &.up {
                  transform: rotate(90deg);
                  -webkit-transform: rotate(90deg);
                }

                &.down {
                  transform: rotate(-90deg);
                  -webkit-transform: rotate(-90deg);
                }
              }
            }
          }

          .cont-description {
            position: relative;

            line-height: 1.04rem;
            font-size: 0.693rem;
            // font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-top: 1.066rem;
          }
        }
      }
    }
  }

  .btn-download {
    position: fixed;
    width: 10.666rem;
    height: 2.346rem;
    font-size: 0.853rem;
    font-family: PingFang SC;
    font-weight: 600;
    // color: #ffffff;
    color: rgba(24, 40, 54, 1);
    line-height: 2.346rem;
    // background: linear-gradient(0deg, #10a383 0%, #48c282 100%);
    background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
    box-shadow: 0px 0.293rem 0.933rem 0px rgba(13, 23, 32, 0.6);
    border-radius: 1.173rem;
    bottom: 1.28rem;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    text-align: center;
  }
}
</style>
